<template>
  <div v-move class="content">
    <div class="header"></div>
    <div>内容</div>
  </div>
</template>

<script setup lang="ts">
import {ref, Directive, DirectiveBinding} from "vue"
const vMove:Directive = (el:HTMLElement, bingding:DirectiveBingding) => {
  let moveEle = el.firstElementChild as HTMLElement

  const mouseDown = (e:MouseEvent) => {
    //鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
    let X = e.clientX - el.offsetLeft
    let Y = e.clientY - el.offsetTop
    const move = (e:MouseEvent) => {
      console.log(e)
      el.style.left = e.clientX - X + 'px';
      el.style.top = e.clientY - Y + 'px';
    }

    document.addEventListener("mousemove", move)
    document.addEventListener("mouseup", () => {
      document.removeEventListener("mousemove", move)
    })

  }

  moveEle.addEventListener("mousedown", mouseDown);
}

</script>

<style lang="less" scoped>
.content {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border: 4px solid #409eff;
}

.header {
  height: 20px;
  background-color: black;
  cursor: move;
}
</style>